<template>
  <div id="app">
   <!--不要前进刷新 后退缓存的情况--> <!-- 这里是会被缓存的视图组件 -->
     <transition :name="transitionName" >
          
          <router-view  :OverallSituation="NewNewsArr" class="child-view"></router-view>
          
      </transition>
      


    <!--用transition 把切换组件页面的容器包含 取消 后退时候 缓存逻辑有错误-->
     <!--<transition :name="transitionName" >
      <keep-alive>
    
      <router-view v-if="$route.meta.keepAlive" :OverallSituation="NewNewsArr" class="child-view"></router-view>
      </keep-alive>
   </transition>

    <transition :name="transitionName" >
       <router-view v-if="!$route.meta.keepAlive" :OverallSituation="NewNewsArr" class="child-view" >
      
      </router-view>
    </transition>-->
     
     
  </div>
</template>

<script>
import config from '../src/config/config.js';
import  http from '../src/config/http.js';
export default {
  name: 'App',
  data () {
    return {
    
        NewNewsArr:[],
        transitionName:'',//router切换动画
        
    }
  },
    watch: {//使用watch 监听$router的变化
    $route(to, from) {
       //console.log(to)
       //console.log(from)
      // console.log(to.fullPath > from.fullPath?'前进':'后退')
      //path命名一定得 越来越长 才能分辨出前进还是后退 
     

      
      if(to.fullPath.length > from.fullPath.length){
        //设置动画名称
        //前进
        
        this.transitionName = 'slide-left';
        from.meta.keepAlive = true;
        to.meta.keepAlive = false;

        // document.body.scrollTop = 0;
        // document.documentElement.scrollTop = 0;
        console.log('前进')
      }else{
        //后退
        this.transitionName = 'slide-right';
         from.meta.keepAlive = false;
        to.meta.keepAlive = true;

        //  document.body.scrollTop = 0;
        //  document.documentElement.scrollTop = 0;
        console.log('后退')
        
      }
    
        if(this.$route.path=='/'){
          //默认清空 不干扰其他页面的情况下 内部储存的localStorage sessionStorage 
            localStorage.clear();
            sessionStorage.clear(); 
        }
    }
  },
  mounted(){
        

         //每次刷新的时候 恢复到首页  /home   /
         //this.$router.push({ path: '/' });
         let historyArr=new Array(history.length);
        //this.$router.replace({ path: '/' });
         
          // setInterval(()=>{
          //       console.log(this.$route.path)
          // },2000)
        if(this.$route.path=='/'){
          //默认清空 不干扰其他页面的情况下 内部储存的localStorage sessionStorage 
            localStorage.clear();
            sessionStorage.clear(); 
        }else if(this.$route.path=='/homeDetails' || this.$route.path=='/homeHistory'){
             this.$router.go(-1);
           // this.$router.replace({ path: '/' });
        }else if(this.$route.path=='/homeDetailsDialogBox'){
            this.$router.go(-2);
             //history.back();
              //history.back();
             //this.$router.replace({ path: '/' });
        }

        

         //可以用 replace 跳转 不会产生history记录 this.$router.replace({ path: '/home' });
           
                


        //只要在登录状态 就实时刷新 新增消息接口
        setInterval(()=>{
                if(this.$route.path!='/'){
                    if((JSON.parse(localStorage.getItem("loginStorageLocalStorage")))){
                        this.NewNews();   
                      
                    }
                }
                
        },8000)        
         
   },
   methods:{
     
     
      NewNews(){
            if((JSON.parse(localStorage.getItem("loginStorageLocalStorage")))){
               let  date = new Date();
               let date1=new Date(new Date().getTime()-1000*60*60*24*30);//只获取今天往前一个月 new Date(new Date().getTime()-1000*60*60*24*1) *1 一天
              let year = date.getFullYear();
              let year1 = date1.getFullYear();

              let month = (date.getMonth() + 1) < 10 ? "0"+(date.getMonth() + 1):(date.getMonth() + 1);
              let month1 = (date1.getMonth() + 1) < 10 ? "0"+(date1.getMonth() + 1):(date1.getMonth() + 1);
              let day = date.getDate()<10?("0"+date.getDate()):date.getDate();
              let day1 = date1.getDate()<10?("0"+date1.getDate()):date1.getDate();
              
              let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
              let hour1 = date1.getHours() < 10 ? "0" + date1.getHours() : date1.getHours();
              let minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
              let minute1 = date1.getMinutes() < 10 ? "0" + date1.getMinutes() : date1.getMinutes();
              let second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
              let second1 = date1.getSeconds() < 10 ? "0" + date1.getSeconds() : date1.getSeconds();
             let ObtainCommunicationListObj={
                  toId:(JSON.parse(localStorage.getItem("loginStorageLocalStorage"))).id,//(JSON.parse(localStorage.getItem("loginStorageLocalStorage"))).loginName,//接收人ID（登录人ID）
                  sendDate:'2018-07-13 00:00:00', //year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second,//刷新时间 yyyy-MM-dd HH:mm:ss
                  //sendDate:year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second,//刷新时间 yyyy-MM-dd HH:mm:ss
                  
                  //sendDate:year1+'-'+month1+'-'+day1+' '+hour1+':'+minute1+':'+second1,
                  
             };
      
       
       http.post(config.HttpDomain+config.communicationGetImById,ObtainCommunicationListObj)
       .then((value)=>{
          //console.log(value)
          
          if(value.message=='1'){
                  this.NewNewsArr=value.list;
                 //config.NewNewsArrVal=new Date();

                
                  
                  //每次调接口都 和本地储存对比
                  let NewNewsArrStorageConcat=[];
                  
                  //收集
                  for(let z in this.NewNewsArr){
                      if(this.NewNewsArr[z].length!=0){
                           if(this.NewNewsArr[z][0].sendId!==(JSON.parse(localStorage.getItem("loginStorageLocalStorage"))).id){
                             //别人给自己发送
                              let obj={
                                        id:this.NewNewsArr[z][0].sendId,
                                        name:this.NewNewsArr[z][0].sendName,
                                        content:this.NewNewsArr[z][0].content,
                                        id_no:'',
                                        time:this.NewNewsArr[z][0].createDate,
                                    };
                                    NewNewsArrStorageConcat.push(obj)
                                    // console.log('____6666') 
                                    // console.log(NewNewsArrStorageConcat)   

                           }else{
                             //自己给别人发送 
                              let obj1={
                                        id:this.NewNewsArr[z][0].toId,
                                        name:this.NewNewsArr[z][0].toName,
                                        content:this.NewNewsArr[z][0].content,
                                        id_no:'',
                                        time:this.NewNewsArr[z][0].createDate,
                               };
                              NewNewsArrStorageConcat.push(obj1)
                              //  console.log('23333') 
                              // console.log(NewNewsArrStorageConcat)   
                           }
                         
                      }
                  }
                  //console.log(JSON.stringify(NewNewsArrStorageConcat))
                  

                 if(JSON.parse(sessionStorage.getItem("NewNewsArrSessionStorage"))){
                   //有储存的时候
                 
                    let NewNewsArrStorage=JSON.parse(sessionStorage.getItem("NewNewsArrSessionStorage"));
                    if(NewNewsArrStorage.length==0){
                    //空数组的时候
                        localStorage.removeItem('NewNewsArrSessionStorage');
                        window.sessionStorage.setItem("NewNewsArrSessionStorage",JSON.stringify(NewNewsArrStorage));
                    }else{
                    //有储存数据的时候 新消息替代旧消息
                        for(let z in NewNewsArrStorage){
                            for(let x in NewNewsArrStorageConcat){
                                if(NewNewsArrStorage[z].id==NewNewsArrStorageConcat[x].id){
                                   NewNewsArrStorage[z]=NewNewsArrStorageConcat[x];
                                   break;
                                }
                            }
                        }
                        //这段数组暂时不需要去重

                         window.sessionStorage.setItem("NewNewsArrSessionStorage",JSON.stringify(NewNewsArrStorage));
                        

                    }

                    
                 }else{
                   //没有储存的时候
                    
                    //NewsArrStorage.push(this.NewNewsArr[0][0])
                    // console.log('____没有储存的时候')
                    // console.log(NewNewsArrStorageConcat);
                    // console.log(JSON.stringify(NewNewsArrStorageConcat));
                    
                    if(NewNewsArrStorageConcat.length!=0){
                        window.sessionStorage.setItem("NewNewsArrSessionStorage",JSON.stringify(NewNewsArrStorageConcat));
                    }
                    
                   
   
                 }
                 
           }else{  

          }
          
       },(error)=>{
       
          
       }) }

      }
   }
}
</script>

<style>
body{
  overflow-x:hidden;
}
#app {
  font-family: '-apple-system', "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
 
 
}
::-webkit-scrollbar {
        width: 0 !important;
        opacity: 0.3;
 }
/*动画模块1*/
/*.slide-fade{
  /*position: absolute;left:0;right: 0;*/
/*}
.slide-fade-enter-active {
  transition: all 0.09s ease;
}
.slide-fade-leave-active {

  transition: all .1s cubic-bezier(3.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
{
  /*left:0;right: 0;*/
  /*transform: translateX(50px);
  /*opacity: 0;*/
/*}*/

/*动画模块2*/
/*.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 250ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}*/
.child-view {
  position: absolute;
  width:100%;
  height:100%;
  transition: all .6s cubic-bezier(.55,0,.1,1); /*页面切换时间0.2刚好*/
}
.slide-left-enter, .slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(+50px, 0);
  transform: translate(+50px, 0);
}
.slide-left-leave-active, .slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-50px, 0);
  transform: translate(-50px, 0);
}



.mint-header{
  height:56px;
   /*background: -webkit-linear-gradient(left, #1de5e2, #b588f7) !important;*/
   
}
.mint-header h1{
    font-size:19px;
   
}
   ::-webkit-scrollbar {
       opacity:0.6;
       width:0;
       }

.text-align-center{
  text-align:center;
}
.login-border-radius-4{
  border-radius:4px;
}

.color-ffffff{
  color:#ffffff;
}
.color-888888{
  color:#888888;
}
.color-999999{
  color:#999999;
}
.color-333333{
  color:#333333;
}
.text-align-center{
  text-align:center;
}
.text-align-right{
  text-align:right;
}
.float-left{
  float:left;
}
.float-right{
  float:right;
}
.box-shadow0160{
   box-shadow:0 1px 6px 0 #999;
}
.border-radius-4{
    border-radius:4px;

}

.display-inline-block{
  display: inline-block;
}
.overflow-hidden{
  overflow:hidden;
}
.text-indent-2em{
  text-indent: 2em;
}
.position-relative{
  position:relative;
}
.position-absolute{
  position:absolute;
}
.position-fixed{
  position:fixed;
}
.padding-left-12{
  padding-left:12px;
}
.padding-left-right-0{
  padding-left:0;
  padding-right:0;
}
.margin-padding-0{
  margin:0;
  padding:0;
}
.margin-7-0{
    margin:7px 0;
}

.margin-padding-0-important{
  margin:0 !important;
  padding:0 !important;
}
.display-inline-block{
  display:inline-block;
}
.margin-top20{
  margin-top:20%;
}
.text4-hide{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
/*1行以后 在隐藏*/
.text1-hide{
  white-space: nowrap !important;
 
  text-overflow: ellipsis !important;
}
.text2-hide{
 overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.white-space-normal{
  white-space: normal;
}
.width90{
  width:90%;
}
.width82{
  width:82%;
}
.width100{
  width:100%;
}
.height100{
  height:100%;
}
/*字体大小*/
.font-size-0-6rem {
    font-size: 0.6rem;
}
.font-size-0-7rem{
  font-size:0.7rem;
}
.font-size-0-8rem{
  font-size:0.8rem;
}
.font-size-8{
  font-size:8px;
}

.font-size-12{
  font-size:12px;
}
.font-size-13{
  font-size:13px;
}
.font-size-14{
  font-size:14px;
}
.font-size-15{
  font-size:15px;
}
.font-size-16{
  font-size:16px;
}
.font-size-20{
  font-size:20px;
}


.bg-ffffff{
  background:#ffffff;
}
.bg-fff{
  background:#fff;
}
.bg-f5f5f5{
  background:#f5f5f5;
}
.bg-f7f7f7{
  background:#f7f7f7;
}
.color-888888{
  color:#888888;
}
.color-red{
  color:#fd4948;
}
.color-343434{
  color:#343434;
}
.color-666666{
  color:#666666;
}
.color-1d15e2{
  color:#1de5e2;
}


 .page-bar{
    width:100%;
    height:56px;
   /*background: -webkit-linear-gradient(left, #1de5e2, #b588f7) !important;*/
   top:0;
   z-index:10;
  }
  .height-56{
    height:56px;
  }

  .word-wrap-break-word{
    word-wrap: break-word;
  }

  .word-break-normal{
    word-break: normal;
  }

</style>
